<template>
  <div>
    <div class="header">教师管理模块 >> 教师信息管理 >> 更多操作</div>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <div class="form">
          <div class="title">修改教师（下列均为必填项）</div>
          教师账号:
          <el-input
            class="input"
            v-model="teacherRef.userName"
            disabled="true"
            placeholder="教师账号"
          ></el-input>
          <br />
          <br />
          *教师姓名:
          <el-input
            class="input"
            v-model="teacherRef.nickName"
            placeholder="教师姓名"
          ></el-input>
          <br />
          <br />
          *所属专业：
          <el-select
            v-model="teacherRef.major"
            placeholder="请选择教师所属专业"
          >
            <el-option
              v-for="(item, index) in majorOptions"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
          <br />
          <br />
          *教师职称：
          <el-select
            v-model="teacherRef.profession"
            placeholder="请选择教师职称"
          >
            <el-option
              v-for="(item, index) in professionOptions"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
          <br />
          <br />
          <div class="btn-container">
            <el-button
              type="primary"
              round
              @click="modifyTeacher"
              :disabled="disabled"
            >
              修改信息
            </el-button>
            <el-button @click="deleteTeacher" type="danger" round>
              删除教师
            </el-button>
            <el-button type="info" round @click="updatePassword">
              重置密码
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { useStore } from "vuex";
import { defineComponent, ref, watch } from "vue";
import { State } from "@/store";
import {
  ADMIN_UPDATE_TEACHER_PASSWORD,
  DELETE_TEACHER,
  MODIFY_TEACHER,
} from "@/store/VuexTypes";
import { User } from "@/datasource/Type";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  props: {
    tid: String,
  },
  setup(props) {
    const teacherList = sessionStorage.getItem("teacherList");
    const disabled = ref(false);
    const store = useStore<State>();
    //console.log(sessionStorage.getItem("tid"));
    const teacherRef = ref<User>({});
    if (teacherList) {
      JSON.parse(teacherList).forEach((element: User) => {
        if (element.id == props.tid) {
          teacherRef.value = element;
        }
      });
    }
    const modifyTeacher = () => {
      ElMessageBox.confirm("此操作将修改该教师信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch(MODIFY_TEACHER, {
            id: teacherRef.value.id,
            nickName: teacherRef.value.nickName,
            major: teacherRef.value.major,
            profession: teacherRef.value.profession,
          } as User);
        })
        .catch(() => {
          //这是注释哟
        });
    };
    const deleteTeacher = () => {
      ElMessageBox.confirm("此操作将永久删除该教师, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch(DELETE_TEACHER, teacherRef.value.id);
        })
        .catch(() => {
          //这是注释哟
        });
    };
    const updatePassword = () => {
      ElMessageBox.confirm("此操作将重置该教师密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch(ADMIN_UPDATE_TEACHER_PASSWORD, teacherRef.value.id);
        })
        .catch(() => {
          //这是注释哟
        });
    };
    watch(teacherRef.value, () => {
      if (
        teacherRef.value.major &&
        teacherRef.value.nickName &&
        teacherRef.value.profession
      ) {
        if (
          teacherRef.value.major.length > 0 &&
          teacherRef.value.profession.length > 0 &&
          teacherRef.value.nickName.trim().length > 0
        ) {
          disabled.value = false;
        } else {
          disabled.value = true;
        }
      } else {
        disabled.value = true;
      }
    });
    //const teacher_userName = computed(() => store.state.teacher_userName);
    //const teacher_password = computed(() => store.state.teacher_password);
    const majorOptions = ref([
      "计算机科学与技术",
      "软件工程",
      "信息管理与信息系统",
    ]);
    const professionOptions = ref(["教授", "副教授", "讲师"]);
    return {
      professionOptions,
      majorOptions,
      disabled,
      teacherRef,
      modifyTeacher,
      deleteTeacher,
      updatePassword,
    };
  },
});
</script>

<style scoped>
.header {
  width: 90%;
  padding: 5px 5px 10px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
  color: grey;
  margin-bottom: 20px;
}
.title {
  margin: 10px auto 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}
.form {
  padding: 50px 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input {
  width: 300px;
}
.tips {
  color: #ccc;
  font-size: 14px;
}
.btn-container {
  display: flex;
  justify-content: center;
}
.btn {
  width: 200px;
}
</style>
